<template>
	<view class="container">
		<!-- 轮播图 -->
		<u-swiper :list="list" indicator indicatorMode="dot" height="300rpx" keyName="image" showTitle></u-swiper>
		<!-- 内容 -->
		<view class="content">
			<!-- 三大模块按钮 -->
			<view class="but">
				<view class="but-item" v-for="(item,index) in butList" :key="index" @click="butChange(item.path)">
					<view class="icon">
						<image :style="{'backgroundColor':item.color}" :src="item.icon" mode=""></image>
					</view>
					<view class="title">
						{{ item.title }}
					</view>
				</view>
			</view>
			<!-- 通知 -->
			<view class="inform">
				<u-notice-bar bgColor="white" icon="/static/icon/inform.png" :text="inform"></u-notice-bar>
			</view>
			<!-- 快捷入口 -->
			<view>
				<uni-card title="快捷入口" spacing="0rpx" margin="0rpx" thumbnail="/static/icon/yes.png">
					<u-grid col="2" class="quick-access">
						<u-grid-item v-for="(item,index) in quickAccess" :key="index">
							<view class="item">
								<view class="item-left">
									<view class="title">{{item.title}}</view>
									<view class="desc">{{item.desc}}</view>
								</view>
								<view class="item-right">
									<image :src="item.icon" mode=""></image>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</uni-card>
			</view>

			<!-- 聚焦三农 -->
			<view class="threeRural">
				<uni-card title="聚焦三农" spacing="0rpx" margin="0rpx" thumbnail="/static/icon/play.png">
					<video src="@/static/video/1.mp4" poster="@/static/video/1.png" type="video/mp4"></video>
				</uni-card>
			</view>
			<!-- 每日精选 -->
			<view class="everyDay">
				<uni-card title="每日精选" spacing="0rpx" margin="0rpx" thumbnail="/static/icon/collect.png">
					<!-- <u-swiper :list="ruralTravel" previousMargin="10" nextMargin="100" height="300rpx" radius="5"
						bgColor="#ffffff" keyName="image"></u-swiper> -->
					<view class="images">
						<view :style="{'backgroundImage':`url(${item.image})`}" class="imagesItem"
							v-for="(item,index) in everyDay">
							<view class="background">

							</view>
							<view class="message">
								<view class="title">
									#{{item.title}}
								</view>
								<view class="desc">
									{{item.desc}}
								</view>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<!-- 乡村动态 -->
			<view class="ruralInfrom">
				<uni-card title="乡村动态" spacing="0rpx" margin="0rpx" thumbnail="/static/icon/ruralInfom.png">
					<uni-card class="ruralInfromCard" v-for="(item,index) in ruralInform" :key="index">
						<view class="ruralInfrom-image">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="Message">
							<view class="Message-title">
								{{item.title}}
							</view>
							<view class="Message-desc">
								<view class="reviewNum">
									{{item.reviewNum}}
								</view>
								<view class="time">
									{{item.time}}
								</view>
							</view>
						</view>
					</uni-card>
				</uni-card>
			</view>
			<!-- 乡村旅游 -->
			<view class="rural-travel">
				<uni-card title="乡村旅游" spacing="0rpx" margin="0rpx" thumbnail="/static/icon/lv.png">
					<view class="images">
						<view :style="{'backgroundImage':`url(${item.image})`}" class="imagesItem"
							v-for="(item,index) in ruralTravel">
							<view class="message">
								<view class="top">
									<view>
										<span>{{item.Top}}.</span>
										<span>TOP</span>
									</view>

								</view>
								<view class="title">
									{{item.title}}
								</view>
								<view class="desc">
									{{item.desc}}
								</view>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<!-- 地图 -->
			<view id="map" class="map" style="width: 100%; height:400rpx;">
				<map style="width: 100%; height:100%;"></map>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import AMapLoader from "@amap/amap-jsapi-loader";
	export default {
		data() {
			return {
				// 通知信息
				inform: '关于做好低温雨雪天气应对工作的通知',
				// 轮播图
				list: [{
					image: '/static/swiperImage/1.jpg',
					title: '岚县生态农业循环发展激活乡村振兴'
				}, {
					image: '/static/swiperImage/2.jpg',
					title: '清风徐来，土豆花开'
				}, {
					image: '/static/swiperImage/3.jpg',
					title: '岚县种好小土豆收获振兴乡村大金豆'
				}, ],
				// 主要模块按钮
				butList: [{
					title: '智慧党建',
					icon: '/static/icon/1.png',
					color: '#e3b3b3',
					path:'/pages/partyBuilding/index'
				}, {
					title: '三农民生',
					icon: '/static/icon/2.png',
					color: '#c2ffc6',
					path:''
				}, {
					title: '文明创建',
					icon: '/static/icon/3.png',
					color: '#b2d6ec',
					path:''
				},{
					title: '举报平台',
					icon: '/static/icon/4.png',
					color: '#ffaa00',
					path:'/pages/reportingPlatform/index'
				} ],
				// 快捷入口
				quickAccess: [{
					title: '村委信箱',
					desc: '意见反馈第一步',
					icon: '/static/icon/letterbox.png'
				}, {
					title: '农业文化',
					desc: '轻松沟通100分',
					icon: '/static/icon/culture.png'
				}, {
					title: '政风热线',
					desc: '快捷掌握农情',
					icon: '/static/icon/hotLine.png'
				}, {
					title: '我的回信',
					desc: '轻松沟通100分',
					icon: '/static/icon/writeBack.png'
				}, ],
				// 每日精选
				everyDay: [{
					image: '/static/swiperImage/1.jpg',
					title: '马鞍山',
					desc: '最美好的回忆马鞍山',
				}, {
					image: '/static/swiperImage/2.jpg',
					title: '画里乡村',
					desc: '最美好的回忆画里乡村',
				}, {
					image: '/static/swiperImage/3.jpg',
					title: '土豆花山',
					desc: '最美好的回忆土豆花山',
				}],
				// 乡村动态
				ruralInform: [{
					image: '/static/swiperImage/2.jpg',
					title: '山西岚县推进“千企帮千村”精准扶贫行动，攻克深度贫困',
					reviewNum: '1评论',
					time: '1天前'
				}, {
					image: '/static/swiperImage/1.jpg',
					title: '多部门推扶贫资金绩效管理：花钱必问效，无效必问责',
					reviewNum: '3评论',
					time: '1年前'
				}],
				// 旅游
				ruralTravel: [{
					image: '/static/swiperImage/1.jpg',
					title: '马鞍山',
					desc: '最美好的回忆马鞍山',
					Top: '1'
				}, {
					image: '/static/swiperImage/2.jpg',
					title: '画里乡村',
					desc: '最美好的回忆画里乡村',
					Top: '2'
				}, {
					image: '/static/swiperImage/3.jpg',
					title: '土豆花山',
					desc: '最美好的回忆土豆花山',
					Top: '3'
				}],
			}
		},
		methods:{
			butChange(path){
				if(!path) return this.$refs.uToast.show({
					type:'error',
					message:'功能正在建设中！',
				});
			uni.navigateTo({
				url:path
			})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/static/css/dh-card.scss';

	.container {
		padding-bottom: 100rpx;

		>view {
			margin-top: 20rpx;
		}

		.u-swiper {
			margin: 0 !important;
		}

		>.content {
			>view {
				margin-bottom: 40rpx;
			}
		}

		// 主要按钮
		.but {
			display: flex;
			justify-content: space-evenly;

			.but-item {
				// background-color: red;
				padding: 10rpx 25rpx;
				border-radius: 30rpx;

				.icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 10rpx;

					image {
						width: 50rpx;
						height: 50rpx;
						padding: 20rpx;
						// border: 2rpx solid red;
						border-radius: 30rpx;;
						// background: red;
					}

				}
			}
		}

		// 快捷入口
		.quick-access {
			height: 300rpx;
			width: 100%;

			.u-grid-item {
				height: 50%;
			}

			.item {
				width: 100%;
				height: 100%;
				// background-color: white;
				// border: 2rpx solid #a1a1a1;
				// padding: 0rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.item-left {
					.title {
						margin-bottom: $uni-spacing-col-sm ;
						font-size: $uni-font-size-base;
						font-weight: 900;
						color: black;
					}

					.desc {
						font-size: $uni-font-size-sm;
					}
				}

				.item-right {
					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

			}
		}

		// 聚焦三农
		.threeRural {
			video {
				height: 400rpx;
				width: 100%;
			}
		}

		// 每日精选
		::v-deep.everyDay {
			.uni-card__content {
				height: 250rpx;

				.images {
					display: flex !important;
					z-index: 99;
					width: 100%;
					height: 100%;
					display: flex;
					overflow: auto hidden;

					.imagesItem {
						background-size: cover;
						margin-left: 20rpx;
						flex-shrink: 0;
						width: 55%;
						height: 100%;
						border-radius: 20rpx;
						position: relative;
					}

					.background {
						position: absolute;
						width: 100%;
						height: 45%;
						background-color: rgba(0, 0, 0, .3);
						bottom: 0;
					}

					.message {
						width: 100%;
						position: absolute;
						left: 20rpx;
						bottom: 20rpx;
						color: white;

						.title {
							font-size: 30rpx;
							font-weight: 600;
						}
					}
				}
			}
		}

		// 乡村动态
		::v-deep.ruralInfromCard {
			.uni-card__content {
				display: flex !important;

				.ruralInfrom-image {
					image {
						height: 150rpx;
						width: 250rpx;
						border-radius: 10rpx;
					}

					margin-right: 30rpx;
				}


				.Message {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.Message-title {
						font-weight: 600;
						color: black;
						font-size: $uni-font-size-base ;
					}

					.Message-desc {
						display: flex;

						>view {
							padding-right: 20rpx;
						}
					}
				}
			}
		}

		// 旅游
		.rural-travel {
			::v-deep.uni-card__content {
				height: 450rpx;
				padding: 0 20rpx !important;

				.images {
					z-index: 99;
					width: 100%;
					height: 100%;
					display: flex;
					overflow: auto hidden;

					.imagesItem {
						background-size: cover;
						margin-left: 20rpx;
						flex-shrink: 0;
						width: 55%;
						height: 100%;
						border-radius: 20rpx;
						position: relative;

						.message {
							position: absolute;
							left: 20rpx;
							bottom: 20rpx;
							color: white;

							.top {
								font-size: $uni-font-size-lg;
								width: 120rpx;
								height: 35rpx;
								padding: $uni-spacing-col-sm $uni-spacing-row-sm;
								border-radius: 35rpx 0;
								// background: #D64E51;
								background-image: linear-gradient(to right, #E68E3E, #D64E51);
								position: relative;

								>view {
									position: absolute;
									top: -10rpx;

									:nth-child(1) {
										font-size: 70rpx;
										font-style: italic;
									}

									:nth-child(2) {}
								}
							}
						}

						.title {
							font-weight: 700;
						}
					}
				}
			}
		}
	}
</style>